<template>
  <div class="margin">
    <router-view/>
  </div>
  <van-tabbar route active-color="#AB9263" v-model="active">
    <van-tabbar-item replace to="/home">
      <span>{{$t('msg.tabHome')}}</span>
      <template #icon="props">
        <img src="./../assets/ic_home_select.png" v-if="props.active"/>
        <img src="./../assets/ic_home.png" v-else/>
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/appointment" icon="search">
      <span>{{$t('msg.tabYy')}}</span>
      <template #icon="props">
        <img src="./../assets/ic_appointment_select.png" v-if="props.active"/>
        <img src="./../assets/ic_appointment.png" v-else/>
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/mine" icon="search">
      <span>{{$t('msg.tabMine')}}</span>
      <template #icon="props">
        <img src="./../assets/ic_mine_select.png" v-if="props.active"/>
        <img src="./../assets/ic_mine.png" v-else/>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>

import {ref} from "vue";

export default {
  name: 'Main',
  setup() {
    const active = ref(0)
    console.log(active)
    return {
      active,
    }
  }
}
</script>

<style scoped>
.margin{
  padding-bottom: 70px;
}
</style>
